import React, {PureComponent} from 'react';
import { Form, Input, Modal, Button, Card, Table } from 'antd';
import moment from 'moment';
import TableList from '@/components/TableList';
import styles from '../../pages/search.less';

const FormItem = Form.Item;
const {TextArea} = Input;

// 申请详情页面，包含审核
@Form.create()
class HasUser extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      list: [...props.groupMember],
      current: 1,
      pageSize: 5,
    };
  }



  componentDidMount() {
    this.getData();
  }

  getData = (m=1,n=5) => {
    const { list } = this.state;
    const len = list.length;
    const v = m-1;
    const data = [];
    for (let i = v*n; i < (v*n+n>len?len:v*n+n); i++) {
      data.push(list[i]);
    }
    this.setState({data})
  };

  onShowSizeChange=(pagination)=> {
    this.getData(pagination.current,pagination.pageSize);
    this.setState({
      current: pagination.current,
      pageSize: pagination.pageSize,
    });

  }
  deleteGMemberF(userCode) {
    const { deleteGMember} = this.props;
    deleteGMember(userCode);
    const { list } = this.state;
    let copyGM = [...list];
    copyGM.map((v,i) => {
      if(v.userCode == userCode) {
        copyGM.splice(i,1);
      }
    })
    this.setState({
        list: copyGM,
    },() => {
      if(this.state.list.length>this.state.pageSize) {
        this.getData(this.state.current,this.state.pageSize);
      }else{
        this.getData()
      }
    })
  }

  render() {
    const { hasUserVisible, handleHasUserVisible, groupMember} = this.props;
    const {  data } = this.state;
    const columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
    },
    {
      title: '登录名',
      dataIndex: 'userCode',
    },
    {
      title: '所属组织',
      dataIndex: 'orgName',
    },
    {
      title: '操作',
      render: (text, record) => {
        return(
        <a onClick={() => this.deleteGMemberF(text.userCode)}>删除</a>
      )}
    }];
    const rowSelection = {
        hideDefaultSelections: true,
        onSelection: this.onSelection,
    };
    return (
      <Modal
        destroyOnClose
        width={800}
        title="已选择人员详情"
        visible={hasUserVisible}
        onCancel={() => handleHasUserVisible()}
        footer={[
          <Button key="back" type="primary" onClick={() => handleHasUserVisible()}>确定</Button>
        ]}
        bodyStyle={{padding:'0'}}
      >
        <Card bordered={false}>
         <Table
            className={styles.tdPadding}
            loading={false}
            // rowSelection={rowSelection}
            pagination={this.state.pagination}
            dataSource={data}
            columns={columns}
            onChange={this.onShowSizeChange}
            hideRowSelection={true}
            rowKey={record => record.userId}
            pagination={{
            simple: false,
            defaultPageSize: 5,
            total: groupMember.length,
            pageSizeOptions: ['5', '10', '20', '30'],
            showSizeChanger: true,
          }}
          />
        </Card>
      </Modal>
    );
  }
}

export default HasUser;
